<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章列表--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../../public/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../../../public/css/public.css" media="all" />
</head>

<body class="childrenBody">

<table id="tableOut" lay-filter="tableOut"></table>


<script type="text/javascript" src="../../../public/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'laydate', 'util', 'layer', 'table', 'form'], function ($, laydate, util, layer, table, form) {
        var tableData = [[1, '小明', 16], [2, '小红', 18]];

        // 假释真的需要默认点击搜索在下面table render过之后再调用$dom.click()即可
        //监听工具条
        table.on('tool(tableOut)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            // 异常不要用它原来的这个作为tr的dom
            // var tr = obj.tr; //获得当前行 tr 的DOM对象
            var $this = $(this);
            var tr = $this.parents('tr');
            var trIndex = tr.data('index');
            if (layEvent === 'detail') { //查看
                //do somehing
                console.log(data);
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    name: '123'
                    , title: 'xxx'
                });
            } else if (layEvent === 'addRowTable') {
                // 外围的table的id + tableIn_ + 当前的tr的data-index
                $(this).attr('lay-event', 'fold').html('-');
                var tableId = 'tableOut_tableIn_' + trIndex;
                var _html = [
                    '<tr class="table-item">',
                    '<td colspan="' + tr.find('td').length + '" style="padding: 6px 12px 6px 60px;">',
                    '<table id="' + tableId + '"></table>',
                    '</td>',
                    '</tr>'
                ];
                tr.after(_html.join('\n'));
                // 渲染table
                table.render({
                    elem: '#' +tableId,
                    data: data.friend||[],
                    cols: [[
                        {field:'id', title: 'ID'},
                        {field:'name', title: '朋友姓名'},
                        {field:'age', title: '年龄'}
                    ]]
                })
            } else if (layEvent === 'fold') {
                $(this).attr('lay-event', 'addRowTable').html('+');
                tr.next().remove();
            }
        });
        var tableIns = table.render({
            elem: '#tableOut',
            // data: [[1, '小明', 16],[2, '小红', 18]],
            data: [
                {id: 1, name: '小米', age: '16',
                    friend: [{id: 2, name: '大米', age: '28'},{id: 5, name: '小虎', age: '16'}]},
                {id: 2, name: '大米', age: '28',
                    friend: [{id: 1, name: '小米', age: '28'}]},
                {id: 3, name: '小花', age: 0},
                {id: 4, name: '小甲', age: '28'},
                {id: 5, name: '小虎', age: '16'},
                {id: 6, name: '小贤', age: '28'}],
            page: {},
            
            height : "full-20",
            cols: [[
                // {type: 'number', fixed: true},
                // {field: 'checkbox', type: 'checkbox', LAY_CHECKED:false, fixed: true},
                {
                    field: 'btn',
                    width: 50,
                    title: '<i class="layui-icon layui-icon-tubiao"></i>',
                    align: 'center',
                    templet: function (d) {
                        return '<a style="display: block; width: 100%; font-size: 20px; color: #888; cursor: pointer;" lay-event="addRowTable">+</a>'
                    }
                },
                {field: 'id', title: 'ID', sort: true},
                {field: 'name', title: '名称', edit: true},
                {field: 'age', title: '年龄', sort: true}
            ]],

        });
        table.on('sort(tableOut)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('tableOut', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
        });
        table.on('edit(tableOut)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            // debugger;
            // this;
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });
    });
</script>
</body>
</html>
